<script>
export default {
  data() {
    return {
      param: {
        content: {
          name: ''
        }
      },
      tableList: {
        data:[],
        pageNo: 1,
        hasMore: false
      },
      formData: {
        detailMode: true,
        item: {

        }
      }
    }
  }
}
</script>

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <label>名称：</label><el-input v-model="param.content.name" placeholder="请输入内容" style="width: 200px"></el-input>
        &nbsp;
        <el-button type="primary" plain>查询</el-button>
      </el-col>
      <el-col :span="24" style="margin-top: 20px;">
        <el-table
            :data="tableList.data"
            border
            style="width: 100%">
          <el-table-column
              fixed
              prop="id"
              label="ID"
              width="150">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100">
            <template slot-scope="scope">
              <el-button @click="formData.detailMode=true;formData.item=scope.row" type="text" size="small">查看</el-button>
              <el-button @click="formData.detailMode=false;formData.item=scope.row" type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="24" style="text-align: right;">
        <el-button v-if="formData.pageNo > 1" type="primary" plain @click="nextPage(-1)">上一页</el-button>
        <el-button v-if="formData.hasMore" type="primary" plain @click="nextPage(1)">下一页</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<style>

</style>
